<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拖拽接口</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;  
            float: left;
            margin: 10px; 
        }

        .div1 {
            border: 1px solid orange;
        }

        .div2 {
            border: 1px solid red;
        }

        .div3 {
            border: 1px solid green;
        }

        .pe {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="div1" id="div1">
        <!-- 在 H5 中，如果想拖拽元素，就必须为元素添加 draggable="true"
            图片和超链接不用添加，默认可以拖拽
        -->
        <p class="pe" id="pe" draggable="true">试着把我拖过去</p>
        <p class="pe" id="pe1" draggable="true">别掉下我</p>
    </div>
    <div class="div2" id="div2"></div>
    <div class="div3" id="div3"></div>

    <script>
        // 开始拖拽
        document.ondragstart = function(e) {
            // 通过事件捕获来获取当前被拖拽子元素
            console.log(e.target)
            e.target.style.opacity = 0.5
            // 通过 DataTransfer 来实现数据的存储与获取
            // setDate(format, data) 
            // format: 数据的类型 [text/plain text/html text/uri-list]  data: 数据 [一般来说是字符串值]]
            e.dataTransfer.setData("text/plain", e.target.id)
        }
        // 拖拽结束
        document.ondragend = function(e) {
            e.target.style.opacity = 1
        }

        document.ondragover = function(e) {
            // 如果想触发 ondrop 事件，这里必须添加阻止浏览器默认行为代码
            e.preventDefault()
        }

        // 浏览器默认会阻止 ondrop 事件
        // 我们必须在 ondragover 中阻止浏览器的默认行为
        document.ondrop = function(e) {
            // e.dataTransfer.setData 存储的值只能在 ondrop 中获取
            var id = e.dataTransfer.getData("text/plain")
            console.log(id)
            e.target.appendChild(document.querySelector("#" + id))
        }
    </script>
</body>
</html>